<template>
  <div>
    <nav-bar style="background-color: #0689f4; color: #fff">
      <div slot="center">异常处理</div>
    </nav-bar>

    <div class="content-top">
      <van-tabs v-model="active" animated swipeable>
        <van-tab title="待处理" badge="8">
          <table border="0" cellPadding="0" cellspacing="0">
            <thead>
              <tr>
                <th>设备</th>
                <th>装置</th>
                <th>异常描述</th>
                <th>任务处理</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in items" :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.equipment }}</td>
                <td>
                  <button class="tips">{{ item.text }}</button>
                </td>
                <td>
                  <van-button type="info" size="small" @click="appoint">
                    完成
                  </van-button>
                  &nbsp;
                  <van-button type="info" size="small" @click="toDetail(item)">
                    详情
                  </van-button>
                </td>
              </tr>
            </tbody>
          </table>
        </van-tab>
        <van-tab title="已处理">
          <await-done></await-done>
        </van-tab>
         <van-tab title="已超期">
          <table border="0" cellPadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>设备</th>
          <th>装置</th>
          <th>异常描述</th>
          <th>类型</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.equipment }}</td>
          <td>
            <div class="tips">{{ item.text }}</div>
          </td>
          <td>
            <van-button  type="danger" size="mini">处理超期</van-button>
          </td>
        </tr>
      </tbody>
    </table>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import NavBar from "@/components/NavBar.vue";
import AwaitAppoint from "@/views/device/manage/awaitAppoint.vue";
import AwaitDone from "@/views/device/manage/awaitDone.vue";
import DoneList from "@/views/device/manage/DoneList.vue";
import OverDone from "@/views/device/manage/over-done.vue";

import { Dialog } from "vant";

export default {
  name: "MyTask",
  components: {
    [Dialog.Component.name]: Dialog.Component,
    NavBar,
    AwaitAppoint,
    AwaitDone,
    DoneList,
    OverDone,
  },
  props: {},
  data() {
    return {
      active: 0,
      items:[
        {name:'精车3',equipment:'油雾装置',text:'脉冲频率低于正常值',status:1},
        {name:'精车3',equipment:'油雾装置',text:'柱塞系统储油罐漏油',status:1},
        {name:'精车3',equipment:'油雾装置',text:'脉冲阀固定没有牢固',status:1},
        {name:'精车3',equipment:'精车空调',text:'空调表面不整洁',status:1},
        {name:'精车3',equipment:'精车空调',text:'风扇运转有异响',status:1},
        {name:'精车3',equipment:'液压装置',text:'油箱滤网不完整',status:2},
        {name:'精车3',equipment:'液压装置',text:'液位计不清晰',status:2},
        {name:'精车3',equipment:'液压装置',text:'液压泵漏油',status:2},
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toDetail(item){
      this.$router.push({
        name:'taskDetail',
        params:item
      })
    },
    appoint() {
        Dialog.confirm({
        title: "任务处理",
        message: "确认已完成？",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style scoped lang="less">
table {
  width: 100%;
  padding: 0 5px 0 3px;
  background-color: #fff;
}
table tr th {
  color: #646566;
  font-weight: 300;
  padding: 0.3rem 0.1rem;
  font-size: 0.4rem;
  border-bottom: 1px solid #7f7f7f;
}
.tips {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #ff976a;
}
table tr td {
  color: #646566;
  padding: 16px 0;
  text-align: center;
  font-size: 0.373333rem;
  border-bottom: 1px solid #7f7f7f;
  button {
    border-radius: 5px;
    padding: 4px 5px;
    border: none;
    color: #fff;
    background-color: #169bd5;
  }
}
.van-tab--active {
  background-color: aliceblue;
}
</style>